<style scoped>
  .content{
    padding-top: 61px;
  }
  ul li{
    display: flex;
    border-bottom: 1px solid #e9e9e9;
    justify-content: center;
    align-items: center;
  }
  ul li a{
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:8px 10px;
  }
  ul li .left{
    flex: 1;
  }
  ul li .right{
  }
</style>

<style>
.pswp__bg {
  background: white !important;
  transition: none !important;
}
</style>

<template>
  <div class="agreement">
    <div v-transfer-dom>
      <previewer @on-close="close" :list="urlData" ref="previewer"></previewer>
    </div>
    <v-labheader 
              title="宽策略证券开户" 
              style="z-index: 999999999;"
              @goBack="goBack">
    </v-labheader>
    <div class="content">
      <ul>
        <li v-for="all in ibforms">
          <a @click="showPdf(all)">
            <div class="left">
              <p>{{all.name}}</p>
            </div>
            <div class="right">
              <h2 class="iconfont icon-xiangyou1"></h2>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
  import myKh from '../components/kh.vue'
//  import pdf from 'pdfjs/lib/pdf/index.js'
  import { Previewer, TransferDom } from 'vux'


  export default {
    directives: {
      TransferDom
    },
    components: {
      Previewer,
      myKh
    },
    data () {
      return {
        allData: [

        ],
        ibforms: [],
        urlData: [],
        isShow: false,
        isLoading: false,
        options: {
        getThumbBoundsFn (index) {
            return {}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        }
      }
    },
    methods: {
      showPdf(item) {
        if (this.isLoading) return
        this.isLoading = true
        this.baseService.get(`/trade/IBForms?form=${item.pdf}`).then((res) => {
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          res.data.forEach((item) => {
            this.urlData.push({
              src: item
            })
          })
          this.show(0)
          this.isShow = true
        }).catch(() => {
          this.isLoading = false
        })
      },
      show (index) {
        this.$refs.previewer.show(index)
      },
      close () {
        this.isShow = false
        this.urlData = []
      },
      goBack () {
        if (this.isShow) {
          this.$refs.previewer.close()
          this.isShow = false
        } else {
          this.$router.go(-1)
        }
      }
    },
    created () {
      this.baseService.get('/trade/IBForms').then((res) => {
        this.ibforms = res.data
      })
    },
    mounted () {

    }
  }
</script>
